<template>
    <div class="header">
        <div class="menu">
            <i class="icon iconfont icon-caidan active" @click="toMode" ></i>
        </div>
        <div class="center">
            <i class="icon iconfont icon-yinyue"  @click="toMusic"></i>
            <i class="icon iconfont icon-tubiao active" @click="toHome"></i>
            <i class="icon iconfont icon-shipin" @click="toMv"></i>
        </div>
        <div class="search">
            <i class="icon iconfont icon-chazhao1" @click="search"></i>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'mHeader',
        methods: {
            search() {
                this.$router.push('/search');
            },
            toMode(){
            	this.$store.commit("setAccleft","0%");
            },
            toMusic(){
            	this.$router.push('/my');
            },
            toHome(){
            	this.$router.push('/index');
            },
            toMv(){
            	this.$router.push('/videos/recommend');
            }
        }
    }
</script>

<style scoped lang="scss">
@import "@/common/css/variable.scss";
    .header {
        display: flex;
        justify-content: space-around;
        background: $color-theme;
        color: $color-text-ggg;
        padding: 3% 0;
        font-size: 1rem;
        .center {
            display: inline-flex;
            justify-content: space-between;
            width: 35%;
        }
        .icon {
            font-size: 1.2rem;
        }
        .active {
            color: white;
        }
       
    }
</style>